<template>
  <el-dialog
    v-model="reviewOrderVisible"
    title="审核订单细项信息"
    width="80%"
  
    @close="closeDialog(false)"
  >
    <el-form
      ref="validateForm"
      :model="orderForm"
      :rules="rules"
      label-width="120px"
      :status-icon="true"
      
    >
     <el-row>
        <el-col :span="12">
       <el-form-item label="客户"  style="margin-bottom:0px;">
       {{orderForm.customerInfo.name}}
      </el-form-item>
     </el-col>
     
        <el-col :span="12">
      <el-form-item label="手机电话" style="margin-bottom:0px;" >
        {{orderForm.customerInfo.phone}} 
      </el-form-item>
      </el-col>
       </el-row>

       <el-row>
        <el-col :span="12">
      <el-form-item label="地址" style="margin-bottom:0px;">
        {{orderForm.customerInfo.address}} 
      </el-form-item>  
        </el-col>
      <el-col :span="12">
          <el-form-item label="所属经销商" style="margin-bottom:0px;">
            {{orderForm.dealerName}} 
          </el-form-item>  
        </el-col>
        
       </el-row>
         <el-row>
        <el-col :span="12">
          <el-form-item label="收款人" >
       {{orderForm.depositer}}
      </el-form-item>
     
      </el-col>
       <el-col :span="12">
     <el-form-item label="下单日期" >
        {{orderForm.orderDate}}
      </el-form-item>
      </el-col>
      </el-row>
      <el-row>
           <el-col :span="12">
      <el-form-item label="定金">
       {{orderForm.deposit}}
      </el-form-item>
      </el-col>
       <el-col :span="12">
       <el-form-item label="业务员" >
         {{ orderForm.businessName}}
      </el-form-item>
      </el-col>
      </el-row>
       <el-row>
           <el-col :span="12">
      <el-form-item label="审核人" >
        {{ orderForm.reviewerName}}
      </el-form-item>
      </el-col>
       <el-col :span="12">
      
 <el-form-item label="备注信息" >
      {{orderForm.remark}}</el-form-item>
      
</el-col>
</el-row>
<el-row>
    <el-col  :span="12">
     
         <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="orderForm.orderStatus"  >
          <el-option
            v-for="item in orderStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
       </el-col>
      <el-col :span="12">
          <el-form-item label="审核意见" prop="opinion" >
        <el-input v-model="opinion"></el-input
      ></el-form-item>
      </el-col>
       <el-table :data="orderDetailData"  highlight-current-row
        row-key="id" style="width: 100%">
        <el-table-column prop="product.name" label="订购商品" />
        <el-table-column prop="product.code" label="订购商品" />
        <el-table-column prop="product.unitName" label="订购商品" />
         <el-table-column prop="orderCount" label="订购数量" />
         <!-- <el-table-column prop="actualCount" label="出货数量" /> -->
        <el-table-column prop="price" label="单价" />
         <el-table-column prop="amountPrice" label="金额" />
      </el-table>


     
      </el-row>
      <el-row style="margin-top:20px;">
        <el-col :span="24">
           <el-form-item>
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button
          @click="
            () => {
              closeDialog(false);
            }
          "
          >取消</el-button
        >
      </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </el-dialog>
</template>

<script>
import {onMounted, reactive, toRefs,ref } from "vue";
import { ElMessage } from "element-plus";
import { postRequest,getRequest } from "../../utils/api";
 
 

export default {
  components: {},
  props: {
    reviewOrderId:String,
    reviewOrderVisible: Boolean
  },

  setup(props, { emit }) {
      const validateForm = ref();

    const state = reactive({
      reviewOrderVisible: props.reviewOrderVisible,
      reviewOrderId:props.reviewOrderId,
      orderDetailData:[],
       orderStatusList: [
        // {value: 0,label: "待提交"},
        {value: 1,label: "待审核"},
        {value: 2,label: "审核通过"},
        {value: 3,label: "审核不通过"},
        // {value: 4,label: "制单"},
        // {value: 5,label: "已发货"},
        // {value: 6,label: "安装调试完毕"},
        // {value:7,label: "已付尾款"}
        
      ], opinion:'通过',
      orderForm: {
          customerInfo:{
            name:'',
            phone:'',
            address:''
          },
         
          orderStatus:1
       
      }
    });
 const rules = {
     
      orderStatus: [{ required: true, message: "请选择订单状态", trigger: "blur" }],
      opinion:[{ required: true, message: "请输入审核意见", trigger: "blur" }],
      
    };


    const closeDialog = (visible, data) => {
      
      emit("onCloseReviewDialag", visible, data);
    };
   
    const loadOrderData = ()=>{
         getRequest("/order/basic/review/one", { id: state.reviewOrderId }).then((res) => {
            if (res && res.code == 200) {
            state.orderForm = res.data;
            } else {
            ElMessage({
                type: "error",
                title: "失败",
                message: "查询失败",
                duration: 2000,
            });
            }

     
        });
    }
    //加载订单细项数据
    const loadOrderDetailData = () => {
      getRequest("/order/basic/detail/", { id: state.reviewOrderId }).then(
        (response) => {
          if (response) {
            state.orderDetailData = response.data;
          }
        }
      );
    };
    const submitForm=()=>{

        postRequest("/order/basic/doReview", { orderId: state.reviewOrderId,opinion:state.opinion,orderStatus:state.orderForm.orderStatus }).then((res) => {
        if (res && res.code == 200) {
            ElMessage.success("审核操作成功")
             emit("onCloseReviewDialag", false, res.data);
        } else {
          ElMessage.error({
            type: "error",
            title: "失败",
            message: "操作失败",
            duration: 2000,
          });
        }
 
  });
    }
    onMounted(()=>{
      loadOrderData()
      loadOrderDetailData()
    })
    return {
      ...toRefs(state),
      closeDialog,
       submitForm ,
       rules
    };
  },
};
</script>

<style scoped>
 
.el-row{
  margin-bottom: -15px;
}
</style>